<template>
  <div class="learun-tags" @click="contextmenuFlag = false">
    <!-- tag盒子 -->
    <div
      v-if="contextmenuFlag"
      class="learun-tags__contentmenu"
      :style="{ left: contentmenuX + 'px', top: contentmenuY + 'px' }"
    >
      <div class="item" @click="closeOthersTags">{{ $t("关闭其它") }}</div>
      <div class="item" @click="closeAllTags">{{ $t("全部关闭") }}</div>
    </div>
    <el-tabs
      v-model="active"
      type="card"
      @contextmenu.native="handleContextmenu"
      @tab-click="openTag"
      @edit="menuTag"
    >
      <el-tab-pane
        :closable="closableTag(item)"
        :key="item.value"
        v-for="item in tagListShow"
        :label="$t(item.label)"
        :name="item.value"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "tags",
  data() {
    return {
      active: "",
      contentmenuX: "",
      contentmenuY: "",
      contextmenuFlag: false,
    };
  },
  created() {},
  mounted() {
    this.setActive();
  },
  watch: {
    tag() {
      this.setActive();
    },
  },
  computed: {
    ...mapGetters(["tagWel", "tagList", "tag", "modules"]),
    myModules() {
      if (this.loginInfo.f_SecurityLevel == 1) {
        return this.modules.filter((t) => t.f_EnabledMark == 1);
      }
      return this.modules.filter((item) => {
        if (item.f_EnabledMark == 1) {
          const moduleAuthIds = this.loginInfo.moduleAuthIds || [];
          if (moduleAuthIds.indexOf(item.f_ModuleId) > -1) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      });
    },
    tagListShow() {
      return this.tagList
        .filter(
          (t) =>
            this.myModules.findIndex(
              (t2) => t2.f_UrlAddress == t.value && t.label == t2.f_FullName
            ) != -1 || t.meta.isNotMenu
        )
        .sort((a, b) => {
          if (this.closableTag(a) && this.closableTag(b)) {
            return 0;
          } else if (this.closableTag(a)) {
            return 1;
          } else if (this.closableTag(b)) {
            return -1;
          }
          return 0;
        });
    },
  },
  methods: {
    watchContextmenu(event) {
      if (!this.$el.contains(event.target) || event.button !== 0) {
        this.contextmenuFlag = false;
      }
      window.removeEventListener("mousedown", this.watchContextmenu);
    },
    handleContextmenu(event) {
      let target = event.target
      let flag = false
      if (target.className.indexOf("el-tabs__item") > -1) flag = true
      else if (target.parentNode.className.indexOf("el-tabs__item") > -1) {
        target = target.parentNode
        flag = true
      }
      if (flag) {
        event.preventDefault()
        event.stopPropagation()
        this.contentmenuX = event.clientX
        this.contentmenuY = event.clientY
        this.tagName = target.getAttribute("aria-controls").slice(5)
        this.contextmenuFlag = true

        window.addEventListener("mousedown", this.watchContextmenu);

      }
    },
    //激活当前选项
    setActive() {
      this.active = this.tag.value;
    },
    menuTag(value, action) {
      if (action === "remove") {
        let { tag, key } = this.findTag(value);
        this.$store.commit("DEL_TAG", tag);
        if (tag.value === this.tag.value) {
          if (this.tagListShow.length > 0) {
            tag = this.tagListShow[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个
            this.openTag(tag);
          } else {
            this.$router.push({
              path: this.$router.$lrRouter.getPath({
                src: this.tagWel.value,
              }),
            });
          }
        }
      }
    },
    openTag(item) {
      let tag;
      if (item.name) {
        tag = this.findTag(item.name).tag;
      } else {
        tag = item;
      }
      this.$router.push({
        path: this.$router.$lrRouter.getPath(
          {
            target: tag.query ? tag.query.target : "",
            name: tag.label,
            src: tag.value,
          },
          tag.meta
        ),
        query: tag.query,
      });
    },
    closeOthersTags() {
      this.contextmenuFlag = false;
      this.$store.commit("DEL_TAG_OTHER");
    },
    findTag(value) {
      let tag, key;
      this.tagListShow.map((item, index) => {
        if (item.value === value) {
          tag = item;
          key = index;
        }
      });
      return { tag: tag, key: key };
    },
    closeAllTags() {
      this.contextmenuFlag = false;
      this.$store.commit("DEL_ALL_TAG_CLOSED");
      if (
        this.closableTag(this.tag) ||
        this.myModules.findIndex((t) => t.f_UrlAddress == this.tag.value) !=
          -1 ||
        this.tag.meta.isNotMenu
      ) {
        this.$router.push({
          path: this.$router.$lrRouter.getPath({
            src: this.tagWel.value,
          }),
        });
      }
    },
    closableTag(item) {
      if (item.query.close == "false" || item.meta.close == false) {
        return false;
      }
      return true;
    },
  },
};
</script>


